
<template>
	<a-collapse v-model:activeKey="activeKey">
		<a-collapse-panel :key="item.cgCode" :header="item.cgName" v-for="item in componentTree">
			<!-- <a-space wrap> -->
			<a-list
				item-layout="vertical"
				size="large"
				:data-source="item.children"
				style="overflow: scroll; max-height: 500px; cursor: move"
				@mousedown="insertNode"
				@click="insertNode"
			>
				<template #renderItem="{ item }">
					<a-list-item key="item.name" :data-id="item.id" class="componentContainer">
						<a-list-item-meta :description="item.description">
							<template #title>
								<span>{{ item.name }}</span>
							</template>
							<template #avatar><a-avatar :src="'data:image/svg+xml;base64,' + item.icon" /></template>
						</a-list-item-meta>
<!--						{{ item.description }}-->
					</a-list-item>
				</template>
			</a-list>

			<!-- </a-space> -->
		</a-collapse-panel>
	</a-collapse>
</template>

<script setup>
import processComponentApi from '@/api/process/processComponentApi'
import { nanoid } from 'nanoid'

const props = defineProps(['lf','config'])

const componentTree = ref([])

const activeKey = ref()

const insertNode = (e) => {
	//阻止事件冒泡
	e.preventDefault()

	if (!e.target) {
		return
	}

	let vDom = props.lf?.closest(e.target, '.componentContainer')
	if (!vDom) {
		return
	}
	let id = vDom.getAttribute('data-id')
	let data = findComponentById(id)
	let type = findNodeName(data.type)
	if (!type) {
		type = findNodeName(data.cgCode)
	}
	if (!type) {
		console.log('noFindNode', data)
	}
	let nodeType = type || 'common-node'

	let nodeConfig = {
		type: nodeType,
		text: data.name,
		id: data.type + '_' + nodeType + '_' + data.id,
		properties: {
			isDragging:true,
			component: data
		}
	}
	props.lf.dnd.startDrag(nodeConfig)
}

const findNodeName = (code) => {
	code = code.toLowerCase()
	let modelMap = props.lf.graphModel.modelMap

	let type = null
	for (let view of modelMap) {
		let realTypeName = view[0]
		let model = view[1]
		let name = realTypeName.toLowerCase()
		if (name == code) {
			type = realTypeName
			break
		}
		if (name.indexOf('-node') == -1) {
			continue
		}

		name = name.replace('-node', '')
		if (name == code) {
			type = realTypeName
			break
		}
		if (code.indexOf(name) != -1) {
			type = realTypeName
			break
		}
		if (model.instanceNode && model.instanceNode(code)) {
			type = realTypeName
			break
		}
	}
	return type
}
const findComponentById = (id) => {
	let data = null
	//获得根type相关的数据
	componentTree.value.forEach((e) => {
		if (e.children) {
			e.children.forEach((ee) => {
				if (ee.id == id) {
					data = ee
				}
			})
		}
	})
	return data
}
onMounted(() => {
	queryComponentTree()
})

const queryComponentTree = async () => {

	let data = []
	if(props?.config?.componentTreeFunc){
		data = props.config.componentTreeFunc();
	}else{
		 data = await processComponentApi.list()
	}

	const result = []
	let defaultValue = buildDefaultComponent()
	result.push(defaultValue)

	data.forEach((e) => {
		if (e.children) {
			e.children.forEach((ee) => {
				if (ee.icon) {
					ee.icon = window.btoa(ee.icon)
				} else {
					//初始化一个图标
					ee.icon = window.btoa(
						'<svg t="1670117592520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5890" width="200" height="200"><path d="M914.5 653.5c-5.5 0-11 1.1-16 3.3l-0.2 0.1h-0.2L510.2 822.2 122.2 657h-0.2l-0.2-0.1c-5-2.1-10.3-3.3-16-3.3-23.1 0-41.8 19.3-41.8 43.1 0 18 10.7 33.3 25.8 39.8l403.9 172.1 0.4 0.1c10.2 4.4 21.8 4.4 32 0l0.2-0.1c0.1 0 0.1-0.1 0.2-0.1l403.9-172.1c15.1-6.5 25.8-21.8 25.8-39.8 0.1-23.8-18.6-43.1-41.7-43.1z m0-186.5c-7.9-0.2-16 3.2-16 3.2L510.2 635.6 121.8 470.2s-10.3-3.2-16-3.2C82.7 467 64 486.2 64 510c0 17.9 10.7 33.3 25.8 39.7l403.9 172c0.1 0 0.1 0.1 0.2 0.1l0.1 0.1c5 2.1 10.3 3.3 16 3.3 5.7 0 11.1-1.2 16-3.3l0.2-0.1c0.1 0 0.1 0 0.2-0.1l403.9-172c15.1-6.4 25.8-21.8 25.9-39.7 0.1-23.8-18.6-43-41.7-43zM89.8 363.2l403.9 172.1c0.1 0 0.1 0 0.2 0.1l0.1 0.1c5 2.1 10.3 3.2 16 3.2 5.5 0 10.9-1.1 16-3.2l0.2-0.1 0.2-0.1 403.9-172c15.1-6.5 25.8-21.8 25.9-39.7 0-18-10.7-33.3-25.8-39.8L526.5 111.6c-0.1 0-0.1 0-0.2-0.1l-0.2-0.1c-10.2-4.4-21.8-4.4-32 0l-0.1 0.1L89.8 283.7C74.7 290.1 64 305.5 64 323.5c0 17.9 10.7 33.2 25.8 39.7z" p-id="5891"></path></svg>'
					)
				}
				ee.id = nanoid(5)
				ee.cgCode = e.cgCode
			})
		}
		result.push(e)
	})
	componentTree.value = result
}
const buildDefaultComponent = () => {
	return {
		cgCode: 'default',
		cgName: '基础组件',
		children: [
			{
				description: '基础组件',
				groupCode: 'default',
				groupName: '基础组件',
				icon: window.btoa(
					'<svg t="1670117592520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5890" width="200" height="200"><path d="M914.5 653.5c-5.5 0-11 1.1-16 3.3l-0.2 0.1h-0.2L510.2 822.2 122.2 657h-0.2l-0.2-0.1c-5-2.1-10.3-3.3-16-3.3-23.1 0-41.8 19.3-41.8 43.1 0 18 10.7 33.3 25.8 39.8l403.9 172.1 0.4 0.1c10.2 4.4 21.8 4.4 32 0l0.2-0.1c0.1 0 0.1-0.1 0.2-0.1l403.9-172.1c15.1-6.5 25.8-21.8 25.8-39.8 0.1-23.8-18.6-43.1-41.7-43.1z m0-186.5c-7.9-0.2-16 3.2-16 3.2L510.2 635.6 121.8 470.2s-10.3-3.2-16-3.2C82.7 467 64 486.2 64 510c0 17.9 10.7 33.3 25.8 39.7l403.9 172c0.1 0 0.1 0.1 0.2 0.1l0.1 0.1c5 2.1 10.3 3.3 16 3.3 5.7 0 11.1-1.2 16-3.3l0.2-0.1c0.1 0 0.1 0 0.2-0.1l403.9-172c15.1-6.4 25.8-21.8 25.9-39.7 0.1-23.8-18.6-43-41.7-43zM89.8 363.2l403.9 172.1c0.1 0 0.1 0 0.2 0.1l0.1 0.1c5 2.1 10.3 3.2 16 3.2 5.5 0 10.9-1.1 16-3.2l0.2-0.1 0.2-0.1 403.9-172c15.1-6.5 25.8-21.8 25.9-39.7 0-18-10.7-33.3-25.8-39.8L526.5 111.6c-0.1 0-0.1 0-0.2-0.1l-0.2-0.1c-10.2-4.4-21.8-4.4-32 0l-0.1 0.1L89.8 283.7C74.7 290.1 64 305.5 64 323.5c0 17.9 10.7 33.2 25.8 39.7z" p-id="5891"></path></svg>'
				),
				name: '备注',
				type: 'remarks'
			}
		]
	}
}
</script>


<style scoped lang="less">
</style>
